---
layout: default
---
        <style>
        table, th, td{
            border: 1px solid black;
            border-collapse:collapse;
            text-align:center;
        }
        th{
            padding:.2em 1em;
        }
        td{
            padding:.2em .2em;
        }
        img{
            max-height:500px;
        }
        figure{
            padding:.5em;
            border:1px solid black;
            position:relative
        }
        figcaption{
            position: absolute;
            left:.5em;
            top: -.9em;
            border: 1px solid black;
            padding:0em .2em;
            background-color:white;
        }

        .remark-code{
            font-size:inherit;
        }
        .remark-slide-number{
            bottom:20px;
            right:36px;
            font-size:18px;
        }
        .footnote{
            border:4px solid black;
            position:absolute;
            left:35px;
            bottom:2px;
            font-size:18px;
            background-color:#fff;
            padding:.2em;
        }
        .remark-slide-content{
            background-image:url('../figs/bg.png');
            background-position:top left;
            background-size: contain;
            padding:1em 2em 1em 2em;
            overflow:hidden;
            font-size:24px;
        }
        h1 {
            margin-block-start: .1em;
        }
        img {
            max-width:100%;
            vertical-align:middle;
        }
        ul {
            margin-block-start:0em;
        }
        /*figure {max-width:100%}*/
        .small {font-size:18px}
        .big {font-size:32px;}
        /*.mermaidsvg {max-width:40%;}*/
        .remark-slide-content figure{
            margin:0;
        }

        .col30{float:left; width:30%}
        .col40{float:left; width:40%}
        .col50{float:left; width:50%}
        .col60{float:left; width:60%}
        .col70{float:left; width:70%}
        .clear{clear:both;}
        .height100 img,.height100 svg{height:100px;}
        .height200 img,.height200 svg{height:200px;}
        .height250 img,.height250 svg{height:250px;}
        .height300 img,.height300 svg{height:300px;}
        .height400 img,.height400 svg{height:400px;}
        .height450 img,.height450 svg{height:450px;}
        .height480 img,.height480 svg{height:480px;}
        .height500 img,.height500 svg{height:500px;}
        .box{
            position:relative;
            border:4px solid black;
            padding:.2em;
        }
        .box .title{
            position: absolute;
            left:.5em;
            top: -.9em;
            border: 4px solid black;
            padding:0em .2em;
            background-color:white;
        }
</style>

<textarea id="source">
{{ content }}
</textarea>

<script>
    MathJax = {
        skipStartupTypeset: true,
        tex: {
            macros: {
                d: "{\\nabla}",
                t: "\\tilde",
                x: "{\\times}",
            }
        },
        options: {
            skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'annotation', 'annotation-xml']
        },
    };
</script>
<script type="text/javascript" id="MathJax-script" async
  src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'>
</script>

<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
<script>
window.onload = function(){

    mermaid.initialize({
        startOnLoad:false,
        cloneCssStyles: false,
        flowchart:{
            //useMaxWidth:false,
            curve:'basis',
            htmlLabels:true,
        },
        theme: 'default',
        themeVariables:{
            edgeLabelBackground:'#fff',
        },
    });


    var slideshow = remark.create({
        ratio: '16:9',
        navigation: {scroll: false,},
    });

    function initSlide() {
        var diagrams = document.querySelectorAll('.remark-visible .mermaid');
        for(var diagram of diagrams){
            mermaid.init(undefined, diagram);
        }
        var slide = document.querySelectorAll('.remark-visible');
        MathJax.typeset(slide);
    }
    slideshow.on('afterShowSlide', initSlide);
    initSlide();
};

</script>

